---
title: Optimizing for production
description: Removing unused code from your production builds for maximum performance.
---

When importing the full UMD version of Dinero.js, the development build is <BundleSize pkg="dinero.js" version="development" />, the minified version is <BundleSize pkg="dinero.js" version="minified" />, and the compressed versions are <BundleSize pkg="dinero.js" version="gzip" /> with [Gzip](https://www.gnu.org/software/gzip/) and <BundleSize pkg="dinero.js" version="brotli" /> with [Brotli](https://github.com/google/brotli).

<Scrollable>

<BundleSizeTable />

</Scrollable>

<Alert type="info">

The size of `dinero.js` includes the one of its dependencies `@dinero.js/core` and `@dinero.js/calculator-number`.

</Alert>

## Compress your assets

If you're using the UMD build, **make sure to compress it before you serve it in production.**

If you're importing Dinero.js via a CDN such as [jsDelivr](https://www.jsdelivr.com/) or [cdnjs](https://cdnjs.com/), you should get Gzip or Brotli compression out of the box. If you're hosting your own, make sure to use the production build and to compress it either manually or using an edge server like [Cloudflare](https://www.cloudflare.com/cdn) or [Cloudfront](https://aws.amazon.com/cloudfront/).

<Panel
  groups={[
    {
      label: 'Resources',
      links: [
        {
          title: 'Content delivery network',
          url: 'https://wikipedia.org/wiki/Content_delivery_network',
        },
        {
          title: 'Gzip',
          url: 'https://gnu.org/software/gzip/',
        },
        {
          title: 'Brotli',
          url: 'https://github.com/google/brotli',
        },
      ],
    },
  ]}
/>

## Use the ESM build

Dinero.js comes in two builds: **Universal Module Definition (UMD) and ECMAScript Modules (ESM).**

The UMD build bundles the entire library. It's meant for usage in Node.js 13.1 or older (before ES modules support), or when your web project doesn't use a build system.

If you're using a modern build system like [webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/) or [Vite](https://vitejs.dev/), you should use the ESM build and bundle it yourself. This lets you take advantage of performance features like [tree-shaking](#tree-shake-your-code) and code splitting.

<Panel
  groups={[
    {
      label: 'Resources',
      links: [
        {
          title: 'JavaScript modules',
          url: 'https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules',
        },
        {
          title: 'Tree-shaking',
          url: 'https://developer.mozilla.org/docs/Glossary/Tree_shaking',
        },
        {
          title: 'Code splitting',
          url: 'https://developer.mozilla.org/docs/Glossary/Code_splitting',
        },
      ],
    },
  ]}
/>

## Tree-shake your code

**Tree-shaking lets you bundle only the code you're using and eliminate the rest.** For example, if you're only using Dinero.js to add and subtract monetary values, only `dinero`, [`add`](/docs/api/mutations/add), [`subtract`](/docs/api/mutations/subtract), and their dependencies should be in your final bundle.

Dinero.js is a pure library, meaning it doesn't produce side-effects. If you're using a modern build system, you can tree-shake it. To do so, make sure to import only the functions you need, and enable tree-shaking in your bundler configuration if necessary.

```js
import { dinero, add, subtract } from 'dinero.js';
import { USD } from '@dinero.js/currencies';

// ...
```

<Panel
  groups={[
    {
      label: 'Resources',
      links: [
        {
          title: 'Tree Shaking',
          url: 'https://webpack.js.org/guides/tree-shaking/',
        },
        {
          title: 'Scope Hoisting',
          url: 'https://v2.parceljs.org/features/scope-hoisting/',
        },
        {
          title: 'Building for Production',
          url: 'https://vitejs.dev/guide/build.html',
        },
      ],
    },
  ]}
/>
